<style scoped>

</style>
<template>
    <div class="page-wrap page-share-order" id="page-share-order">
    <div class="g-body">

        <header-component :page-name="!!uid?'我的晒单记录':'晒单记录'"></header-component>


        <div class="w-shareList" id="shareOrderList" v-if="item.length>0">


            <a href="javascript:;" class="w-shareItem"  v-link="{path:'/shareDetail',query:{id:i.id}}" v-for="(k,i) in item" >
                <div class="title">{{i.title}}</div>
                <div class="author">{{i.usename}}&nbsp;<span class="time">{{i.time}}</span></div>
                <div class="abbr">
                    <div class="pic" :style="{backgroundImage:'url('+i.thumbs+')'}"></div>
                    <div class="txt">{{i.content}}</div>
                </div>
            </a>

        </div>
        <div class="w-more" id="shareOrderMore" v-el:share-order-more>
            <template v-if="hasMore && !!item">
                <b class="ico ico-loading"></b> 努力加载中
            </template>
            <template v-if="!item && page==0">
                还没有晒单记录
            </template>
            <template v-if="!hasMore && !!item">
                没有更多了
            </template>
        </div>
    </div>
    </div>
    <nav-component keep-alive ></nav-component>
</template>
<script>
    import ShareOrder from '../module/shareOrder'
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    module.exports = {
        data() {
            return {
                item: [],
                page: 0,
                limit:10,
                id: 0,
                uid:0,
                hasMore: true,
                loading: false,
            }
        },

        components: {

            headerComponent,
            navComponent

        },

        created(){

            this.$dispatch('isLoading', true);

        },

        async ready() {

            if (!!this.$route.query.id||!!this.$route.query.uid) {

                this.id = this.$route.query.id;

                this.uid  = this.$route.query.uid;

            }

            console.log(this.uid);

            let res = [];

            if (!!this.uid) {

                 res = await ShareOrder.getListByUID(this.uid, this.page, this.limit);

            } else {

                res = await ShareOrder.getList(this.id, this.page, this.limit);

            }

            if (!!res.item) {

                this.item.splice(0,this.item.length);

                this.item.push(...res.item);

            } else if(res.item.length<10){

                this.hasMore = false;

            }

            document.addEventListener('scroll',this.getMore,false);

            this.$dispatch('isLoading', false);

        },

        beforeDestroy() {

            document.removeEventListener('scroll',this.getMore,false)

        },

        methods: {

            async loadMore(){

                if (this.loading) {

                    return;

                }

                this.loading = true;

                let res = [];

                if (!!this.uid) {

                    res = await ShareOrder.getListByUID(this.uid, this.page, this.limit);

                } else {

                    res = await ShareOrder.getList(this.id, this.page, this.limit);

                }



                if (res && res.item && res.item.length > 0) {

                    this.page++;

                    this.item.push(...res.item);

                    console.log(this.item);

                } else {

                    this.hasMore = false;

                }

                this.loading = false;

            },

            getMore(){

                let pos = this.$els.shareOrderMore.getBoundingClientRect();


                if ( this.hasMore &&
                        ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {

                    this.loadMore();

                }

            }
        }
    }

</script>
